import React from "react";
import {
  PullToRefresh,
  ListView,
  Carousel,
  WhiteSpace,
  WingBlank,
  Modal
} from "antd-mobile";
import axios from "axios";
import { Grid, Toast } from 'antd-mobile';
import '../css/modal.css';

axios.defaults.baseURL = '/app'
axios.defaults.headers.post['Content-Type'] = 'application/json';
export default class Thumbnail extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data:props.data,
      category:props.category,
      code:props.code,
      modal:false,
      url:'',
      title:''
    }
  }

  showModal = (key,url,title) => {
    console.log(url);
    url = url.replace("_0.1","");
    // e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
      url:url,
      title:title
    });
  }
  onClose = (modal,url) => () => {
    this.setState({
      [modal]: false,
      [url]:url,
      
    });
  }

  onWrapTouchStart = (e) => {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    // const pNode = closest(e.target, '.am-modal-content');
    // if (!pNode) {
    //   e.preventDefault();
    // }
  }


  componentWillMount() {
    var url = "/memory/category/"+this.state.category+"/code/" + this.state.code;
    axios.get(url).then(res => {
      console.log(res.data.data);
      this.setState({
        data: res.data.data,
      });
    });
  }

  componentWillReceiveProps = (props) =>{
    this.setState({
      category:props.category,
      code:props.code
    })
  }

  render() {
      return (
        <div>
          <Modal
            visible={this.state.modal}
            transparent
            maskClosable={true}
            closable={true}
            onClose={this.onClose('modal')}
            title={this.state.title}
            popup={true}
            footer={[{ text: 'Ok', onPress:(e) => { console.log('ok'); this.onClose('modal')(); } }]}
            wrapProps={{ onTouchStart: this.onWrapTouchStart }}
            // afterClose={() => { alert('afterClose'); }}
            className="style={{ height: '100%'}}"
          
          >
            <div style={{ height: '100%'}}>
              <img src = {this.state.url} style={{ width: '100%'}}/>
            </div>
          </Modal>
        
        <Grid data={this.state.data}
          columnNum={3}
          renderItem={dataItem => (
            <div onClick={() => this.showModal('modal',dataItem.url,dataItem.title)} style={{ padding: '11.5px'}} >
              <img src={dataItem.url} style={{ width: '75px', height: '75px' }} alt="" />
              <div style={{ color: '#888', fontSize: '14px', marginTop: '8 px' }}>
                <span>{dataItem.title}</span>
              </div>
            </div>
          )}
        />
        </div>
      );
  }
}

